import React, { useEffect, useState } from 'react';
import { Space } from 'antd';
import { ArrayBase } from '../array-base';
import { useField, observer, useFieldSchema, RecursionField } from '@formily/react';
import { ISchema } from '@formily/json-schema';

interface BtnWrapProps {
  editable?: boolean;
}

type ComposedBtnWrap = React.FC<BtnWrapProps>;

export const BtnWrap: ComposedBtnWrap = observer((props) => {
  const schema = useFieldSchema();
  const { editable } = props || {};
  if (!schema) throw new Error('can not found schema object');
  const renderAddition = () => {
    return schema.reduceProperties((addition, schema) => {
        return addition.concat((<RecursionField schema={schema} name={schema.name} />) as any);
    }, []);
  };
  const btn = renderAddition();
  return (
    <ArrayBase>
        {
           editable?  <Space size="large">{btn}</Space>: null
        }
    </ArrayBase>
  );
});

export default BtnWrap;
